import React, { Component, PureComponent } from 'react'

//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'

import { Button } from 'antd';


const withAuthDom = (dom) => {
  const Comp = dom

  if (!Comp){
    console.error('请传入必须参数(组件)')
    return
  }

  //定义UI组件
  class AuthDom extends PureComponent {

    render() {

      const { buttonPermissionList, dispatch, permission = null, size = 'small', ...rest } = this.props

      if (!permission) {
        return <Comp {...rest} size={size} />
      }

      return buttonPermissionList.includes(permission) ? <Comp {...rest} size={size} /> : null

    }
  }

  return connect(
    state => ({
      buttonPermissionList: state.buttonPermissionList
    })
  )(AuthDom)
}

//定义UI组件
// class AuthButton extends PureComponent {

//   render() {

//     const { buttonPermissionList, dispatch, permission = null, size = 'small', ...rest } = this.props

//     if (!permission) {
//       return <Button {...rest} size={size} />
//     }

//     return buttonPermissionList.includes(permission) ? <Button {...rest} onClick={this.test} /> : null

//   }
// }

//使用connect()()创建并暴露一个 AuthButton 的容器组件
// export default connect(
//   state => ({
//     buttonPermissionList: state.buttonPermissionList
//   })
// )(withAuthDom)

export default withAuthDom
